<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
    <link rel="stylesheet" href="../html/css/style.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<!--style="overflow-y: hidden"-->
<body>
<!--<div class="layui-container">-->
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md12">
                <ul class="layui-nav" lay-bar="disabled">
                    <li class="layui-nav-item">
                        <a href="home.html">Spark日记<span class="layui-badge">9</span></a>
                    </li>

                    <li class="layui-nav-item" lay-unselect="" id="thumbhead"> <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img"></a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" onclick="updateUserInfo()">用户信息</a></dd>
                            <dd><a href="/logout">退出登录</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-col-md12">
                <div class="layui-row ">
                    <div class= "layui-col-md2 layui-side-scroll">
                        <ul class="layui-nav layui-nav-tree"  style="margin-right: 10px"  lay-filter="demo">
                            <li class="layui-nav-item ">
                                <a href="javascript:;" onclick="searchDiaries()">所有日记</a>
                                <dl class="layui-nav-child">
                                    <dd><a href="" onclick="searchDiaries()">搜索</a></dd>
                                </dl>
                            </li>
                            <li class="layui-nav-item" ><a href="javascript:;"  onclick="newDiary()">新建日记</a></li>
                            <li class="layui-nav-item" ><a href="javascript:;" onclick="showStatistics()" >统计信息</a></li>
                            <li class="layui-nav-item" style="padding-bottom: 800px"></li>
                        </ul>
                    </div>
                    <div id="view" class="layui-col-md10" style="height: 900px">
                        <!--模板放在此处-->
                        <iframe id="iframeMain" src="" style="width: 100%; height: 100% "></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--</div>-->
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<script src="./js/jquery-2.1.4.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['dropdown', 'util'], function(){
        var dropdown = layui.dropdown
            ,util = layui.util
            ,$ = layui.jquery;

        //菜单点击事件
        dropdown.on('click(demo1)', function(options){
            var thisElem = $(this);
            console.log(thisElem, options);
        });


        util.event('lay-active', {
            normal: function(){
                $('#demo-box').children().addClass('layui-col-md3').removeClass('layui-col-md4');
                $('#demo-box').find('.layui-menu').removeClass('layui-menu-lg');
            }
            ,lg: function(){
                $('#demo-box').children().addClass('layui-col-md4').removeClass('layui-col-md3')
                $('#demo-box').find('.layui-menu').addClass('layui-menu-lg');
            }
        });

        document.getElementById("iframeMain").src = "search.html";
        // document.cookie = "userId=2";
        // console.log("cookieh", document.cookie);
    });
</script>
<!--<script id="demo" type="text/html">-->
<!--  <h3>{{ d.title }}</h3>-->
<!--  <ul>-->
<!--  {{#  layui.each(d.list, function(index, item){ }}-->
<!--    <li>-->
<!--      <span>{{ item.modname }}</span>-->
<!--      <span>{{ item.alias }}：</span>-->
<!--      <span>{{ item.site || '' }}</span>-->
<!--    </li>-->
<!--  {{#  }); }}-->
<!--  {{#  if(d.list.length === 0){ }}-->
<!--    无数据-->
<!--  {{#  } }}-->
<!--  </ul>-->
<!--</script>-->

<script type="text/javascript">

    layui.use('laytpl');
    var data = { //数据
        "title":"Layui常用模块"
        ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
    }
    var getTpl = demo.innerHTML
        ,view = document.getElementById('view');
    layui.laytpl(getTpl).render(data, function(html){
        view.innerHTML = html;
    });

    function newDiary(){
        document.getElementById("iframeMain").src = "newDiaryArticle.html";
    }

    function searchDiaries(){
        document.getElementById("iframeMain").src = "search.html";
    }

    function showStatistics(){
        document.getElementById("iframeMain").src = "statistic.html";
    }
    function updateUserInfo(){
        document.getElementById("iframeMain").src = "userSet.html";
    }
</script>

</body>
</html>